<!--定义侧边栏样式-->
<template>
  <div>
<!--    menu中写一个router就可以根据index的数据跳转到相应的vue-->
    <el-menu

        router
        class="el-menu-vertical-demo"
         style="width: 200px;min-height: 90vh;background-image: linear-gradient(to top, #cccbcb ,#cccbcb);overflow: hidden">
          <el-menu-item @click="c1" index="admin_main" :style="active1" >首页</el-menu-item>
          <el-menu-item @click="c2" index="admin" :style="active2">管理员管理</el-menu-item>
          <el-menu-item  @click="c3" index="user" :style="active3">用户管理</el-menu-item>
          <el-menu-item  @click="c4" index="store" :style="active4">仓库管理</el-menu-item>
          <el-menu-item @click="c5" index="obj_classify" :style="active5">物品分类管理</el-menu-item>
          <el-menu-item @click="c6" index="object" :style="active6">物品管理</el-menu-item>
          <el-menu-item @click="c7" index="record" :style="active7">记录管理</el-menu-item>

    </el-menu>
  </div>
</template>

<script>

export default {
  name: "Aside",

  data(){
    return{
      active1:'text-align: center;font-size: 15px;color: black;font-weight: bold',
      active2:'text-align: center;font-size: 15px;color: black;font-weight: bold',
      active3:'text-align: center;font-size: 15px;color: black;font-weight: bold',
      active4:'text-align: center;font-size: 15px;color: black;font-weight: bold',
      active5:'text-align: center;font-size: 15px;color: black;font-weight: bold',
      active6:'text-align: center;font-size: 15px;color: black;font-weight: bold',
      active7:'text-align: center;font-size: 15px;color: black;font-weight: bold'


    }
  },
  methods:{

    c1(){


      this.active1="text-align: center;font-size: 15px;color:royalblue;font-weight: bold;background-color:white"
      this.active4="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active3="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active2="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active5="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active6="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active7="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"

    },
    c2(){
      this.active2="text-align: center;font-size: 15px;color:royalblue;font-weight: bold;background-color:white"
      this.active4="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active1="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active3="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active5="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active6="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active7="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"

    },



    c3(){
      this.active3="text-align: center;font-size: 15px;color:royalblue;font-weight: bold;background-color:white"
      this.active4="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active1="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active2="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active5="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active6="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active7="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"

    },
    c4(){

        this.active4="text-align: center;font-size: 15px;color:royalblue;font-weight: bold;background-color:white"
        this.active3="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
        this.active1="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
        this.active2="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
        this.active5="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
        this.active6="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
        this.active7="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"

    },
    c5(){


      this.active5="text-align: center;font-size: 15px;color:royalblue;font-weight: bold;background-color:white"
      this.active4="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active1="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active2="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active3="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active6="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active7="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"

    },
    c6(){


      this.active6="text-align: center;font-size: 15px;color:royalblue;font-weight: bold;background-color:white"
      this.active4="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active1="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active2="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active5="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active3="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active7="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"

    },
    c7(){


      this.active7="text-align: center;font-size: 15px;color:royalblue;font-weight: bold;background-color:white"
      this.active4="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active1="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active2="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active5="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active3="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"
      this.active6="text-align: center;font-size: 15px;color:black;font-weight: bold;background-color:#cccbcb"

    },


   }
}
</script>

<style >

</style>